<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="天天来收租">
		<meta name="format-detection" content="telphone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="HandheldFriendly" content="true">
		<meta name="MobileOptimized" content="320">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="screen-orientation" content="portrait">
		<meta name="browsermode" content="application">
		<meta name="full-screen" content="yes">
		<meta name="x5-orientation" content="portrait">
		<meta name="x5-fullscreen" content="true">
		<meta name="x5-page-mode" content="app">
		<title>开局漫画</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<style>
			.zone {
				background-color: white;
				font-size: 0
			}
			.comic {
				/* display: none; */
				background-color: white;
			}
			.comic img {
				display: none;
				width: 100%;
				margin-bottom: 4px;
				opacity: 0;
			}
			.step3 {
				display: none;
				/* display: flex; */
				align-items: center;
				width: 100%;
				height: 100vh;
				color: #4d4230;
				background-image: url("http://img.qxgs.cc/tiantianlaishouzu/img/comic/weituoshu.png");
				background-size: 100% auto;
				background-repeat: no-repeat;
				background-position: center;
				background-color: #333;
			}
			.step3 .content {
				width: 100%;
				height: 138.59vw;
				max-height: 560px;
				padding: 0 12% 0 18%;
			}
			.content h2 {
				margin-top: 34%;
				font-size: 36px;
				line-height: 36px;
				text-align: center;
				color: #AA3F1F;
			}
			.p1, .p2, .p3, .p4 {
				font-size: 16px;
				line-height: 40px;
			}
			.p3, .p4 {
				text-align: right;
			}
			.content .p1 {
				color: #AA3F1F;
			}
			.content .p2 {
				color: #333;
				text-indent: 2em;
			}
			.content .p3 {
				margin-top: 10%;
				font-size: 18px;
			}
			.content .p4 {
				font-size: 14px;
			}
			.content .confirm {
				display: block;
				width: 150px;
				height: 22px;
				margin: 0 auto;
				margin-top: 12%;
				opacity: 1;
				animation: 2s flicker alternate infinite;
			}
			.text {
				position: fixed;
				width: 100%;
				margin: 0 auto;
				text-align: center;
				left: 0;
				top: 80%;
				color: coral;
				font-size: 24px;
				line-height: 36px;
				animation: 1s flicker alternate infinite;
			}
			.show {
				animation: 2s show forwards;
			}
			.hide {
				animation: 1s hide forwards;
			}
			@keyframes flicker {
				0% {
					opacity: 0.4;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes show {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes hide {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="zone">
			<div class="main">
				<div class="comic step1" id="step1">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/1.jpg" alt="">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/2.jpg" alt="">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/3.jpg" alt="">
				</div>
				<div class="comic step2" id="step2">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/4.jpg" alt="">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/5.jpg" alt="">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/6.jpg" alt="">
					<img src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/7.jpg" alt="">
				</div>
				<div class="comic step3" id="step3">
					<div class="content">
						<h2>委托书</h2>
						<p class="p1" id="nickname">亲爱的xx</p>
						<p class="p2">新生活就要开始了，请好好打理爷爷给你留下来的房产吧，期待你在天天来收租表现哦</p>
						<p class="p3">委托人:亲爱的大爷</p>
						<p class="p4" id="datetime">签发日期：xxxx年xx月xx日</p>
						<img class="confirm" id="confirm" src="http://img.qxgs.cc/tiantianlaishouzu/img/comic/anniu.png" alt="">
					</div>
				</div>
				<p class="text" id="next">点击继续</p>
			</div>
			
		</div>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/comic.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
